<template>
	<view class="house-info-wrapper">
		<!-- 轮播图 -->
		<view class="swiper-container" v-if="hasImages">
			<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item, index) in images" :key="index">
					<image :src="item" mode="aspectFill" class="slide-image" />
				</swiper-item>
			</swiper>
			<view class="gradient-overlay"></view>
		</view>

		<view class="info-card">
			<!-- 标题 -->
			<view class="title">台盘村遇见民宿「村BA店」</view>

			<!-- 标签 -->
			<view class="tags-container" v-if="hasPrimaryTag || hasTags">
				<view class="tag-primary" v-if="hasPrimaryTag">
					<text>{{primaryTag}}</text>
					<text class="tag-desc" v-if="primaryTagDesc">{{primaryTagDesc}}</text>
				</view>
				<view class="tags-list" v-if="hasTags">
					<view class="tag-item" v-for="(tag, index) in validTags" :key="index">{{tag}}</view>
				</view>
			</view>

			<!-- 距离 -->
			<view class="distance-container" v-if="hasDistance">
				<view class="distance">
					<text>距{{locationName}}直线{{distanceValue}}公里</text>
				</view>
			</view>

		<!-- 地址 -->
		<view class="address-container" @click="openMap" v-if="address">
			<text class="address">{{address}}</text>
			<view class="map-link-container">
				<text class="map-link">地图</text>
				<uni-icons type="right" size="12" color="#4a90e2"></uni-icons>
			</view>
		</view>
		</view>
	</view>
</template>
<!-- // +----------------------------------------------------------------------
// | panweidongAI编程开发者  
// +----------------------------------------------------------------------
// | 联系379247101@qq.com   公司：AI技术部
// +----------------------------------------------------------------------
// | Author: panweidong <379247101@qq.com>
// +---------------------------------------------------------------------- -->

<script>
export default {
  name: 'houseInfo',
  props: {
    title: {
      type: String,
      default: ''
    },
    primaryTag: {
      type: String,
      default: ''
    },
    primaryTagDesc: {
      type: String,
      default: ''
    },
    tags: {
      type: Array,
      default: () => []
    },
    locationName: {
      type: String,
      default: ''
    },
    distanceValue: {
      type: [String, Number],
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    images: {
      type: Array,
      default: () => []
    },
    // 地图相关参数
    latitude: {
      type: [String, Number],
      default: 26.5783 // 默认贵州贵阳坐标
    },
    longitude: {
      type: [String, Number],
      default: 106.7135
    },
    placeName: {
      type: String,
      default: '房源位置'
    }
  },
  computed: {
    // 判断是否有图片
    hasImages() {
      return this.images && this.images.length > 0;
    },
    // 判断是否有主要标签
    hasPrimaryTag() {
      return this.primaryTag && this.primaryTag.trim() !== '';
    },
    // 过滤有效的标签
    validTags() {
      if (!this.tags || !Array.isArray(this.tags)) return [];
      return this.tags.filter(tag => tag && tag.toString().trim() !== '');
    },
    // 判断是否有标签
    hasTags() {
      return this.validTags.length > 0;
    },
    // 判断是否有距离信息
    hasDistance() {
      return (this.locationName && this.locationName.trim() !== '') && 
             (this.distanceValue && this.distanceValue.toString().trim() !== '');
    }
  },
  methods: {
    openMap() {
      // 打开地图导航
      uni.openLocation({
        latitude: parseFloat(this.latitude),
        longitude: parseFloat(this.longitude),
        name: this.placeName || this.title || '房源位置',
        address: this.address || '查看详细位置',
        success: function() {
          console.log('打开地图成功');
        },
        fail: function(err) {
          console.error('打开地图失败:', err);
          uni.showToast({
            title: '打开地图失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.house-info-wrapper {
	position: relative;
	margin-bottom: 20rpx;
	width: 100%;
}

.info-card {
	position: relative;
	z-index: 2;
	margin: -180rpx 30rpx 0 30rpx;
	background-color: #fff;
	padding: 30rpx;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
}

/* 轮播图样式 */
.swiper-container {
	position: relative;
	width: 100vw;
	height: 650rpx;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
}

.swiper {
	width: 100%;
	height: 100%;
}

.gradient-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 240rpx;
	background-image: linear-gradient(to top, rgba(255, 255, 255, 1) 20%, transparent);
	z-index: 1;
}

.slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 20rpx;
	color: #333;
}

.tags-container {
	margin-bottom: 20rpx;
}

.tag-primary {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;

	text:first-child {
		display: inline-block;
		background-color: rgba(255, 107, 53, 0.1);
		color: #ff6b35;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.tag-desc {
		font-size: 24rpx;
		color: #666;
	}
}

.tags-list {
	display: flex;
	flex-wrap: wrap;
}

.tag-item {
	border: 1px solid #e5e5e5;
	padding: 6rpx 16rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	color: #333;
}

.distance-container {
	margin-bottom: 10rpx;
}

.distance {
	font-size: 26rpx;
	color: #666;
}

.address-container {
	display: flex;
	justify-content: space-between;
	font-size: 26rpx;
	color: #666;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:active {
		background-color: rgba(74, 144, 226, 0.1);
		border-radius: 8rpx;
		padding: 10rpx;
		margin: -10rpx;
	}
}

.map-link-container {
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.map-link {
	color: #4a90e2;
	text-decoration: underline;
}
</style> 